<template>
  <div class="detail-container">
    <div class="author-info">
      <div class="avatar">
        <img :src="authorInfo.headImgUrl" alt="作者头像">
        <span>{{ authorInfo.username }}</span>
      </div>
      <div class="articleComs">
        <div class="articleNum">
          <div>{{ artArtNum.length ? artArtNum.length : 0 }}篇</div>
          <span>文章总数</span>
        </div>
        <div class="commentsNum">
          <div>{{ artComs.length }}条</div>
          <span>评论总数</span>
        </div>
        <div class="commentsNum">
          <div>{{ artDetailData.views }}条</div>
          <span>浏览量</span>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="article-info">
        <div class="title"> {{ artDetailData.title }}</div>
        <div class="content" v-html="artDetailData.content">
        </div>
      </div>
      <div class="commentsArea">
        <span>评论区:</span>
        <div class="reviewers" v-for="cominfo in artComs" :key="cominfo.article_id">
          <div class="autReviewer-info">
            <div class="avatar">
              <img :src="cominfo.reply_user_id.headImgUrl" alt="作者头像">
              <div class="autReviewer">
                <span>用户id: {{ cominfo._id }}</span>
                <span>{{ dayjs(cominfo.updatedAt).format('YYYY-MM-DD HH:MM:ss') }}</span>
              </div>
            </div>
            <div class="commentInfo">
              评价：{{ cominfo.content }}
            </div>
          </div>
        </div>
      </div>
      <div class="articleCom">
        <span class="title">文章评论:</span>
        <div class="content">
          <textarea name="content" id="" cols="30" rows="10" placeholder="对此？你怎么看"
            v-model="textareaVal.content"></textarea>
          <button @click="handleSub">提交评论</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted, ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const axios = inject('axios')
const dayjs = inject('dayjs')
const message = inject('message')

let artDetailData = ref({}) //文章详情数据
let authorInfo = ref({}) //文章作者信息
let artComs = ref([]) //文章评论列表
let artArtNum = ref([]) //作者的文章数量
let textareaVal = reactive({
  content:""
})

// console.log('文章详情',route.query.aid);
onMounted(() => {
  loadArtDetail()
  loadAuthorArt()
  loadComList()
})
// 前台文章具体详情
const loadArtDetail = async () => {
  const result = await axios.get(`/api/front/articles/${route.query.aid}`)
  // console.log('文章详情信息', result);
  artDetailData.value = result.data.data
  authorInfo.value = result.data.data.author
  console.log('  authorInfo.value', authorInfo.value);
  // artComs.value = result.data.data.coms
  // console.log(artDetailData.value,authorInfo.value);
}
// 作者发布的文章相关信息
const loadAuthorArt = async () => {
  const result = await axios.get(`/api/front/articles?author=${localStorage.getItem('uid')}`)
  console.log('作者发布的文章相关信息', result);
  artArtNum.value = result.data.data
  console.log(artArtNum.value);
}
// 获取评论列表
const loadComList = async () => {
  const result = await axios.get(`/api/front/comments/articles/${route.query.aid}`)
  console.log('评论列表', result);
  artComs.value = result.data.data
}
// 发布评论
const handleSub = async () => {
  console.log(textareaVal.content);
  await axios.post('/api/front/comments/articles',{
    data:{
      article_id:route.query.aid,
      content:textareaVal.content
    }
  })
  textareaVal.content = ''
  message.success('评论发布成功')
  loadComList()
}
</script>

<style lang="scss" scoped>
.detail-container {
  width: 100vw;
  display: flex;

  .author-info {
    width: 20%;
    height: 100vh;
    background: #e9eaec;
    // background: rgb(191, 191, 191);

    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 25px;
      box-sizing: border-box;
      border-radius: 5px;

      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }

      span {
        margin-left: 15px;
      }
    }

    .articleComs {
      display: flex;
      flex-wrap: wrap;

      .articleNum,
      .commentsNum {
        width: 50%;
        height: 100px;
        // background-color: antiquewhite;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        div:nth-child(1) {
          font-size: 23px;
        }

        span:nth-child(2) {
          font-size: 13px;
          color: rgb(177, 175, 175);
        }
      }
    }
  }

  .detail {
    display: flex;
    flex-direction: column;
    width: 80%;
    padding: 5px 10px;

    .article-info {
      width: 100%;
      // background: rgb(195, 189, 189);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title {
        font-size: 26px;
      }

      .content {
        font-size: 16px;
        text-indent: 2em;
        color: rgb(73, 73, 73);
      }
    }

    .commentsArea {
      display: flex;
      flex-direction: column;

      &>span {
        font-size: 26px;
      }

      .reviewers {
        width: 100%;
        padding: 5px;
        box-shadow: 1px 1px 8px 0px #cfd1d2;
        margin-top: 5px;

        .autReviewer-info {
          width: 100%;
          display: flex;
          flex-direction: column;

          .avatar {
            display: flex;

            img {
              width: 50px;
              height: 50px;
              border-radius: 5px;
            }

            .autReviewer {
              display: flex;
              flex-direction: column;
              padding: 5px;

              span:nth-child(1) {
                color: rgb(70, 133, 169);
              }
            }
          }

          .commentInfo {
            font-size: 16px;
            color: rgb(73, 73, 73);
          }
        }
      }
    }

    .articleCom {
      padding: 5px;

      .title {
        font-size: 22px;
      }

      .content {
        textarea {
          width: 100%;
          outline: none;
          background-color: #fbf7f3;
        }

        button {
          width: 100px;
          height: 40px;
          background-color: #e67e22;
          border: 0;
          cursor: pointer;
        }
      }
    }
  }
}
</style>